<script setup>
import { RouterLink, RouterView } from "vue-router";
import { onMounted } from "vue";
import Home from "../../views/HomeView.vue";
import store from "../../store";
const MSG = "helloworld";
store.getStu();
store.sendPolicy();
store.sendAct();
onMounted(() => {

});
</script>

<script>
export default {
  data() {
    return {
      IStouch: "endtouch"
    };
  },
  methods: {
    starttouch(e) {
      e.currentTarget.parentNode.parentNode.children[0].children[0].className =
        "";
      e.currentTarget.parentNode.parentNode.children[1].children[0].className =
        "";
      e.currentTarget.parentNode.parentNode.children[2].children[0].className =
        "";
      e.currentTarget.className += " starttouch";
    },
    endtouch(e) {
      e.currentTarget.className = "";
    }
  }
};
</script>



<template>
  <div class="mainPg">
    <!-- 上部路由 -->
    <router-view class="routerview"></router-view>
    <!-- footer底部导航栏 -->
    <footer class="footer">
      <RouterLink to="./home">
        <div @touchstart="starttouch" @click="starttouch" class="starttouch">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouye" />
          </svg>
          <div class="sy">首页</div>
        </div>
      </RouterLink>
      <RouterLink to="./contact">
        <div @touchstart="starttouch" @click="starttouch">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-faqi" class="faqi" />
          </svg>交流
        </div>
      </RouterLink>
      <RouterLink to="./mine">
        <div @touchstart="starttouch" @click="starttouch">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wode" />
          </svg>我的
        </div>
      </RouterLink>
    </footer>
  </div>
</template>



<style scoped>
.icon {
  font-size: 35px;
}


a {
  text-decoration: none;
  color: black;
}

.routerview {
  position: absolute;
  z-index: 0;
}

.mainPg {
  position: absolute;
  top: 0;
  left: 0;
  height: 813px;
  /* background-color: pink; */
  width: 100%;
}
.footer {
  /* background-color: gray; */
  box-shadow: 0px 0px 2px pink;
  background-color: #fff;
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  right: 0;
  height: 82px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer > a {
  text-align: center;
  width: 50px;
  height: 56px;
  /* background-color: #fff; */
  justify-content: space-around;
}

.starttouch {
  color: red;
  text-shadow: 0 0 2px pink;
}
</style>
